<template>
    <div>
        <div class="main">
            <!-- <div class="ad-info" id="login">
                <div class="main-title">NIUA-EASY</div>
                <el-row style="margin-top:30px;">
                    <el-input style="margin-top:5px;" v-model.trim="username" placeholder="请输入用户名"></el-input>
                    <el-input style="margin-top:5px;" v-model.trim="password" placeholder="请输入密码"></el-input>
                </el-row>
                <el-row style="text-align:center"></el-row>
            </div> -->
            <div class="logo_box"  v-loading="loadingInit" element-loading-background="rgba(0,0,0,0.1)">
                <h3>{{ $t('login.title') }}</h3>
                <div class="input_outer">
                    <span class="u_user"></span>
                    <el-input class="text" v-model.trim="username" :placeholder="$t('login.username')"
                              @keyup.enter.native="login"></el-input>
                </div>
                <div class="input_outer">
                    <span class="us_uer"></span>
                    <el-input class="text" type="password" v-model.trim="password" :placeholder="$t('login.password')"
                              @keyup.enter.native="login"></el-input>
                </div>
                <el-row :gutter="20">
                    <el-col span="13">
                        <div class="input_outer">
                            <el-input class="text" v-model.trim="verfiy" :placeholder="$t('login.verifyCode')"
                                      style="margin-left: 0;width: 100%"></el-input>
                        </div>
                    </el-col>
                    <el-col span="11">
                        <VerifyCode ref="vc" begin-color="#dfe0d9" end-color="#f9d3e3" width="110" height="45"
                                    border-radius="8" :interfere-line="false" :interfere-point="false" nums="3"
                                    color="#000"
                                    opacity="0.9" @getCode="getVerifyCode"></VerifyCode>
                    </el-col>
                </el-row>
                <div class="mb2">
                    <el-button class="act-but submit" style="width: 100%;" type="primary" size="medium"
                               v-on:click="login">{{ $t('login.logIn') }}
                    </el-button>
                </div>
                <p/>
                <div style="display: flex;justify-content: center">
                    <LangSelect style="display: block;color: #f5f7fa"></LangSelect>
                </div>
            </div>
            <vue-particles
                color="#fff"
                :particleOpacity="0.7"
                :particlesNumber="60"
                shapeType="circle"
                :particleSize="4"
                linesColor="#fff"
                :linesWidth="1"
                :lineLinked="true"
                :lineOpacity="0.4"
                :linesDistance="150"
                :moveSpeed="2"
                :hoverEffect="true"
                hoverMode="grab"
                :clickEffect="true"
                clickMode="push"
                class="lizi"
            ></vue-particles>

        </div>

    </div>
</template>
<script>
// import { AUTH_LOGIN_URL } from '../utils/api.js';
import LangSelect from "@/components/LangSelect";
import VerifyCode from "@/components/VerifyCode";
import { aesEncrypt } from "@/utils/jsencrypt";


export default {
    name: 'Login',
    components: {LangSelect, VerifyCode},
    data: function () {
        return {
            loadingInit: false,
            username: '',
            password: '',
            verfiy: '',
            codeRes: '',
            redirect: undefined,
            otherQuery: {}
        };
    },
    created() {
        // let that = this;
        // document.onkeypress = function(e) {
        //     var keycode = document.all ? event.keyCode : e.which;
        //     if (keycode == 13) {
        //         that.login();// 登录方法名
        //         return false;
        //     }
        // }
    },
    watch: {
        $route: {
            handler: function (route) {
                const query = route.query
                if (query) {
                    this.redirect = query.redirect
                    this.otherQuery = this.getOtherQuery(query)
                }
            },
            immediate: true
        }
    },
    methods: {
        login: function () {
            this.loadingInit = true;
            let that = this;
            if (that.username.length <= 0 && that.password.length <= 0) {
                this.$message.error(this.$t('login.need'));
                this.loadingInit = false;
                return;
            }
            if (that.verfiy == '') {
                this.$message.error(this.$t('login.vcNull'));
                this.$refs.vc.updateCanvas();
                this.loadingInit = false;
                return;
            }
            if (that.codeRes.toString() != that.verfiy) {
                this.$message.error(this.$t('login.falseVC'));
                this.verfiy = '';
                this.$refs.vc.updateCanvas();
                this.loadingInit = false;
                return;
            }
            let loginForm = {
              username: aesEncrypt(this.username),
              password: aesEncrypt(this.password)
            }
            this.$store.dispatch('user/login', loginForm)
                .then(() => {
                    this.$router.push({path: this.redirect || '/', query: this.otherQuery})
                    this.loadingInit = false;
                    this.$notify.success({
                        title: this.$t('login.tip'),
                        duration: 2500,
                        message: this.$t('login.success'),
                        showClose: false
                    });
                })
                .catch((e) => {
                    if(e.message == "User is disabled"){
                        this.$message.error(this.$t('login.userDisabled'));
                    } else {
                        this.$message.error(this.$t('login.trueActPwd'));
                        this.verfiy = '';
                        this.$refs.vc.updateCanvas();
                    }
                    this.loadingInit = false;
                })
        },
        getOtherQuery(query) {
            return Object.keys(query).reduce((acc, cur) => {
                if (cur !== 'redirect') {
                    acc[cur] = query[cur]
                }
                return acc
            }, {})
        },
        getVerifyCode: function (code, res) {
            this.codeRes = res;
        }
    }
};
</script>

<style lang="scss" scoped>
.lizi {
    height: 100vh;
    background-image: url(../assets/login/login.jpg);
    background-size: cover;
    background-position: center center;
}

.logo_box {
    width: 350px;
    height: 430px;
    padding: 35px;
    color: #eee;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -175px;
    margin-top: -250px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.logo_box h3 {
    text-align: center;
    height: 20px;
    font: 20px 'microsoft yahei', Helvetica, Tahoma, Arial, 'Microsoft jhengHei', sans-serif;
    color: #ffffff;
    height: 20px;
    line-height: 20px;
    padding: 0 0 35px 0;
}

.input_outer {
    height: 46px;
    padding: 0 5px;
    margin-bottom: 30px;
    border-radius: 50px;
    position: relative;
    border: rgba(255, 255, 255, 0.2) 2px solid !important;
    overflow: hidden;
}

.u_user {
    width: 25px;
    height: 25px;
    background-image: url(../assets/login/login_ico.png);
    background-position: -125px 0;
    position: absolute;
    margin: 10px 13px;
}

.us_uer {
    width: 25px;
    height: 25px;
    background-image: url(../assets/login/login_ico.png);
    background-position: -125px -34px;
    position: absolute;
    margin: 10px 13px;
}

.text {
    width: 220px;
    height: 46px;
    outline: none;
    display: inline-block;
    margin-left: 50px;
    border: none;
    line-height: 46px;
    width: calc(100% - 50px);
}
</style>
<style>
.text input.el-input__inner {
    background: transparent !important;
    border: none !important;
    color: #fff;
}

.text input:-webkit-autofill {
    -webkit-transition-delay: 99999s;
    -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}
</style>